<script setup lang="ts" name="BpmnPalette">
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { customPalettes } from './'
import CkIcon from '@/designer/Common/components/CkIcon/index.vue'

const modelerStore = useModelerStore()

const palettesList = ref([])

const createElement = (e, type, options: any = {}) => {
  console.log(e)
  const modeler = modelerStore.getModeler
  const ElementFactory = modeler.get('elementFactory')
  const create = modeler.get('create')
  const HandTool = modeler.get('handTool')
  const SpaceTool = modeler.get('spaceTool')
  const LassoTool = modeler.get('lassoTool')
  const GlobalConnect = modeler.get('globalConnect')
  if (type === 'bpmn:HandTool') {
    HandTool.activateHand(e)
  } else if (type === 'bpmn:LassoTool') {
    LassoTool.activateSelection(e)
  } else if (type === 'bpmn:SpaceTool') {
    SpaceTool.activateSelection(e)
  } else if (type === 'bpmn:GlobalConnectTool') {
    GlobalConnect.start(e)
  } else if (type === 'bpmn:SubprocessExpanded') {
    var subProcess = ElementFactory.createShape({
      type: 'bpmn:SubProcess',
      x: 0,
      y: 0,
      isExpanded: true
    })
    var startEvent = ElementFactory.createShape({
      type: 'bpmn:StartEvent',
      x: 40,
      y: 82,
      parent: subProcess
    })

    create.start(e, [subProcess, startEvent], {
      hints: {
        autoSelect: [subProcess]
      }
    })
  } else if (type === 'bpmn:Participant') {
    create.start(e, ElementFactory.createParticipantShape())
  } else if (type === 'bpmn:Create') {
    const popupMenu = modeler.get('popupMenu')
    const canvas = modeler.get('canvas')
    const element = canvas.getRootElement()
    const position = { x: 60, y: e.y }
    popupMenu.open(element, 'bpmn-create', position, {
      title: '创建元素',
      width: 300,
      search: true
    })
    console.log(popupMenu, 'popupMenu')
  } else {
    const shape = ElementFactory.createShape({ type: type, ...(options) })
    if (Object.keys(options).length > 0) {
      shape.businessObject.di.isExpanded = options.isExpanded
    }
    create.start(e, shape)
  }
}

const elementClick = (e, type) => {
  createElement(e, type)
}
const elementMouseDown = (e, type) => {
  e.stopPropagation()
  createElement(e, type)
}

onMounted(() => {
  palettesList.value = customPalettes()
})
</script>

<template>
  <div class="palette">
    <el-scrollbar>
      <div class="item-palette" v-for="v, idx in palettesList" :key="idx" @click="(e) => elementClick(e, v.type)" @mousedown="(e) => elementMouseDown(e, v.type)">
        <CkIcon v-if="v.className.includes('bp:')" :icon="v.className" :title="v.title"></CkIcon>
        <i v-else :class="v.className" :title="v.title"></i>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.palette {
  position: relative;
  width: 49px;
  overflow: hidden;
  border-right: 1px solid var(--el-border-color-lighter);

  .el-scrollbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .item-palette {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    font-size: 30px;

    &:hover {
      color: var(--el-color-primary);
    }

    .el-icon {
      font-size: 48px !important;
    }
  }

  .el-collapse {
    .el-collapse-item {
      :deep(.el-collapse-item__header) {
        display: flex;

        h2 {
          flex: 1;
          padding: 0 16px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
